<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      class MyElement extends HTMLElement {
        constructor() {
          super()
        }
        render() {
          let date = new Date(this.getAttribute('datetime') || Date.now())
          const year = date.getFullYear()
          const month = String(date.getMonth() + 1).padStart(2, '0')
          const day = String(date.getDate()).padStart(2, '0')
          const hour = String(date.getHours()).padStart(2, '0')
          const minute = String(date.getMinutes()).padStart(2, '0')
          const second = String(date.getSeconds()).padStart(2, '0')
          this.innerHTML = `${year}-${month}-${day} ${hour}:${minute}:${second}`
        }
        connectedCallback() {
          this.render()
        }

        disconnectedCallback() {
          // 在元素从文档移除的时候，浏览器会调用这个方法
          // （如果一个元素被反复添加到文档／移除文档，那么这个方法会被多次调用）
        }

        static get observedAttributes() {
          return [
            'datetime'
            /* 属性数组，这些属性的变化会被监视 */
          ]
        }

        attributeChangedCallback(name, oldValue, newValue) {
          // 当上面数组中的属性发生变化的时候，这个方法会被调用
          this.render()
        }

        adoptedCallback() {
          // 在元素被移动到新的文档的时候，这个方法会被调用
          // （document.adoptNode 会用到, 非常少见）
        }
      }
      customElements.define('my-element', MyElement)

      const myElement = document.createElement('my-element')

      myElement.setAttribute('datetime', new Date())

      document.body.appendChild(myElement)
      setInterval(() => {
        myElement.setAttribute('datetime', new Date())
      }, 1000)

      class MyButton extends HTMLButtonElement {
        constructor() {
          super()
          this.addEventListener('click', () => {
            alert('Clicked!')
          })
        }
        connectedCallback() {
          this.innerHTML = 'Click me!'
        }
      }

      customElements.define('my-button', MyButton, { extends: 'button' })
    </script>

    <button is="my-button"></button>
    <!-- <my-element></my-element> -->
  </body>
</html>
